import React from 'react'
import { Button, Modal, Pagination, Popconfirm, Table } from 'antd'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import moment from 'moment'
import PropTypes from 'prop-types'
import styles from './SystemProcess.less'
import { PAGE_SIZE } from '../../constants'
import SystemProcessModal from './SystemProcessModal'
import UpdateSystemProcessModal from './UpdateSystemProcessModal'
import * as cookie from '../../services/cookie'

const confirm = Modal.confirm

function SystemProcess ({ dispatch, list: dataSource, loading, total, page: current, location }) {
  const deleteHandler = (id) => {
    dispatch({
      type: 'systemprocess/remove',
      payload: id,
    })
  }

  function pageChangeHandler (page) {
    dispatch(routerRedux.push({
      pathname: '/systemprocess',
      query: { page },
    }))
  }

  function editHandler (id, values) {
    dispatch({
      type: 'systemprocess/patch',
      payload: { id, values },
    })
  }

  function createHandler (values) {
    const cookieUser = cookie.getCookie('token')
    const user = JSON.parse(cookieUser)
    values.createUser = user.account
    dispatch({
      type: 'systemprocess/create',
      payload: values,
    })
  }

  function onRowClick (record) {
  }

  const columns = [
    {
      title: '系统编号',
      dataIndex: 'appId',
      key: 'appId',
    }, {
      title: '等级',
      dataIndex: 'appLevel',
      key: 'appLevel',
    }, {
      title: '系统名称',
      dataIndex: 'appName',
      key: 'appName',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (record) => {
        if (record === null) {
          return ''
        }
        return moment(record)
          .format('YYYY-MM-DD HH:mm:ss')
      },
    }, {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: (record) => {
        if (record === null) {
          return ''
        }
        return moment(record)
          .format('YYYY-MM-DD HH:mm:ss')
      },
    }, {
      title: '创建人',
      dataIndex: 'createUser',
      key: 'createUser',
    }, {
      title: '操作',
      key: 'operation',
      width: 100,
      render: (text, record) => (
        <span className={styles.operation}>
          <UpdateSystemProcessModal record={record} onOk={editHandler.bind(null, record.id)}>
            <a>更新</a>
          </UpdateSystemProcessModal>
          <Popconfirm title="确定删除?" onConfirm={deleteHandler.bind(null, record.id)}>
            <a href="">删除</a>
          </Popconfirm>
        </span>
      ),
    },
  ]
  return (
    <div className={styles.normal}>
      <div className={styles.create}>
        <SystemProcessModal record={{}} onOk={createHandler}>
          <Button icon="download" size={'large'} type="primary">创建租户</Button>
        </SystemProcessModal>
      </div>
      <div>
        <Table
          onRowClick={onRowClick}
          columns={columns}
          dataSource={dataSource.list}
          loading={loading}
          bordered
          rowKey={record => record.id}
          pagination={false}
          size="small"
        />
        <Pagination
          className="ant-table-pagination"
          total={dataSource.total}
          current={dataSource.pageNum}
          pageSize={PAGE_SIZE}
          onChange={pageChangeHandler}
          showQuickJumper
        />
      </div>
    </div>
  )
}

function mapStateToProps (state) {
  const { list, total, pages, updateModalType } = state.systemprocess
  return {
    loading: state.loading.models.systemprocess,
    list,
    total,
    pages,
  }
}

SystemProcess.propTypes = {
  location: PropTypes.object,
}

export default connect(mapStateToProps)(SystemProcess)
